<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商品图片列表</title>
<style type="text/css">
/*body,#list,h1,dl,dd{
	margin:0;
	padding:0
}
#list{
	width:211px;
	height:525px;
	padding:5px;
	background:pink;
}
h1{
	font-size:18px;
	color:white;
	background:#63F;
	height:35px;
	line-height:35px;
	text-indent:1em;
}
img {
	border:0px;
}
dd{
	border:1px #f0eaf8 solid;
	background:yellow;
}
a{
	text-decoration:none;
}
a img{border:1px #CDCDCD solid;}

a:hover{
	border:1px red solid;
}*/
h1, ul, li {
	margin:0px;
	padding:0px;
}
ul, li {
	list-style-type:none;
}
img {
	border:0px;
}
#beauty {
	width:211px;
}
#beauty h1 {
	height:35px;
	font-size:18px;
	font-family:Arial, "楷体";
	background-color:#9873f2;
	line-height:35px;
	color:#fff;
	padding-left:10px;
}
a img{border:1px #CDCDCD solid;}
a:hover img{border:1px #E17717 solid;}
</style>
</head>

<body>
<div id="beauty">
  <h1>1F 美妆 珠宝</h1>
  <ul>
    <li><a href="#"><img src="imgs/photo-1.jpg" alt="温碧泉"/></a></li>
    <li><a href="#"><img src="imgs/photo-2.jpg" alt="佰参堂"/></a></li>
    <li><a href="#"><img src="imgs/photo-3.jpg" alt="比度克"/></a></li>
    <li><a href="#"><img src="imgs/photo-4.jpg" alt="缔梵石"/></a></li>
    <li><a href="#"><img src="imgs/photo-5.jpg" alt="爆款团"/></a></li>
  </ul>
</div>
</body>
</html>
